import React, { memo, useCallback, useState } from 'react'
import SectionHeader from '@/components/section-header'
import SectionTabs from '@/components/section-tabs'
import SectionRooms from '@/components/section-rooms'
import { SectionV2Wrapper } from './style'
import SectionFooter from '@/components/section-footer'

const HomeSectionV2 = memo((props) => {
  const { infoData } = props

  // 初始化值的设置方法如下(重点)
  // 注意: useState 初始化值只有在第一次渲染时设置有效,后续再设置初始化值是无效的
  // 由于在外侧已经判断过了,所以这里 infoData.dest_list 一定是有值的
  const initialName = Object.keys(infoData.dest_list)[0]
  const [name, setName] = useState(initialName)
  const tabNames = infoData.dest_address?.map((item) => item.name)

  const handleTabCick = useCallback((index, name) => {
    setName(name)
  }, [])

  return (
    <SectionV2Wrapper>
      <SectionHeader title={infoData.title} subTitle={infoData.subtitle} />
      <SectionTabs tabNames={tabNames} tabCick={handleTabCick} />
      <SectionRooms roomList={infoData.dest_list?.[name]} itemWidth="33.33333%" />
      <SectionFooter name={name} />
    </SectionV2Wrapper>
  )
})

export default HomeSectionV2
